<template>
  <div>
    <el-upload multiple action="" :on-change="handleChange" :file-list="fileList" :show-file-list="false" ref="upload"
      :auto-upload="false" :http-request="myUploadFile">

      <el-button size="small" type="primary">上传文件</el-button>
        <div slot="tip" class="el-upload__tip">解压仅支持7z、lzma、cab、zip、gzip、bzip2、Z和tar格式。</div>
      <!-- <el-dropdown split-button type="success" @command="handleCommand">
        上传
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="uploadFile">上传文件</el-dropdown-item>
          <el-dropdown-item command="uploadFiles">上传文件夹</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->

    </el-upload>
    <el-table ref="multipleTable" :data="tableData" style="width: 100%;"
      @selection-change="handleSelectionChange" @select-all="selectAll" height="calc(80vh - 17px)">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="文件名" prop="name">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;">
            <el-image style="width: 20px; height: 20px;" :src="file" v-if="scope.row.isFile == 1">
            </el-image>
            <el-image style="width: 20px; height: 20px;" :src="files" v-if="scope.row.isFile == 2"></el-image>
            <el-image style="width: 20px; height: 20px;" :src="zip" v-if="scope.row.isFile == 3"></el-image>

            <span style="margin-left:5px"> {{ scope.row.name }} </span>
          </div>

        </template>
      </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-button size="small" :disabled="listTable.length > 0 ? false : true" type="danger" @click="SelectDelete()">
            删除</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="warning" v-if="scope.row.isFile == 3" @click="UnzipClick(scope.row)">
            解压</el-button>
          <el-button size="mini" type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="50%" center>
      <!-- <span>需要注意的是内容是默认不居中的{{fileList}}</span> -->

      <li v-for="(item,index) in fileList" :key="index"> {{item.name}}</li>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCommand">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ApiVersionGeturl,
    ApiVersionDelfile,
    ApiVersionUpload,
    ApiVersionUnzip
  } from "../../api/api";

  export default {
    data() {
      return {
        url: this.$route.query.url,
        centerDialogVisible: false,
        fileList: [],
        upFileList: [], // 文件File列表 上传参数,
        tableData: [],
        listTable: [],
        file: require("../../../static/icon/file.png"),
        files: require("../../../static/icon/files.png"),
        zip: require("../../../static/icon/zip.png"),
      };
    },
    created() {


      this.request();
    },
    methods: {
      handleCommand() {
        let uploadForm = new FormData()
        this.upFileList.map(item => {
          uploadForm.append('file', item)
        })
        let config = {
          'Content-Type': 'multipart/form-data',
          'Authorization': 'Basic ' + localStorage.getItem('token'),
          'UploadUrl': this.$route.query.url

        }
        ApiVersionUpload(uploadForm, config).then(res => {
          // console.log("上传", res);

          if (res.code == 200) {
            this.upFileList = [];
            this.fileList = [];
            this.centerDialogVisible = false;
            this.$message({
              message: res.message,
              type: "success",
            });
            this.request();

          }
        })

        // this.$refs.upload.submit();

      },
      myUploadFile() {

      },
      request() {
        ApiVersionGeturl({
          url: this.url,
        }).then((res) => {
          if (res.code == 200) this.tableData = res.data;
        });
      },
      SelectDelete() {
        this.$confirm("是否永久删除选中的文件?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            let data = JSON.parse(JSON.stringify(this.listTable));

            ApiVersionDelfile({
              allFile: data,
              url: this.url,
            }).then((res) => {
              if (res.code == 200)
                this.$message({
                  message: res.message,
                  type: "success",
                });
              this.request();
            });
          })
          .catch(() => {});
      },
      handleChange(file, fileList) {

        this.fileList = fileList
        this.upFileList = []
        const name = file.name.split('.')[1];
        for (let x of fileList) {
          if (x.raw) {
            this.upFileList.push(x.raw)
          }
        }
        this.centerDialogVisible = true;
      },

      UnzipClick(e) {

        ApiVersionUnzip({
          fileName: e.name,
          url: this.$route.query.url
        }).then(res => {
        
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            this.request();
          }
        })
      },
      handleDelete(index, row) {
        this.$confirm(
            row.isFile == 2 ?
            "此操作将永久删除该目录下的所有文件, 是否继续?" :
            "此操作将永久删除该文件, 是否继续?",
            "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
          .then(() => {
            ApiVersionDelfile({
              url: this.url,
              isFile: row.isFile,
              name: row.name,
            }).then((res) => {
              if (res.code == 200)
                this.$message({
                  message: res.message,
                  type: "success",
                });
              this.request();
            });
          })
          .catch(() => {});
      },
      selectAll(e) {
        this.listTable = JSON.parse(JSON.stringify(e));
      },
      handleSelectionChange(val) {
        this.listTable = val;
      },
    },
  };

</script>

<style scoped>


</style>
